<template>
  <el-row class="search-input">
    <el-form-item :label="`${label}：`" :prop="prop" :required="required">
      <PopoverInput
        :content="recordNoStr"
        :popover-list="recordNos"
        @select="handleSelectRecordNos"
        @clear="handleClearRecordNos"
      />
    </el-form-item>
    <SelectInfoDialog
      :title="label"
      :visible.sync="dialogVisible"
      :form-item-list="formItems"
      :columns="columns"
      :associate-key="associateKey"
      :loadData="loadData"
      @getNos="updateRecordNos"
    />
  </el-row>
</template>
<script>
import PopoverInput from '../PopoverInput';
import SelectInfoDialog from '../SelectInfoDialog';
export default {
  components: {
    PopoverInput,
    SelectInfoDialog
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    formItems: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    associateKey: { // 关联字段的key，默认选择关联单据号recordNo
      type: String,
      default: 'recordNo'
    },
    loadData: { // 加载数据请求方法
      type: Function
    }
  },
  data () {
    return {
      dialogVisible: false,
      recordNoStr: '',
      recordNos: []
    }
  },
  methods: {
    handleSelectRecordNos () {
      this.dialogVisible = true
    },
    handleClearRecordNos () {
      this.recordNoStr = ''
      this.recordNos = []
      this.emitRecordNos()
    },
    updateRecordNos (recordNos) {
      this.recordNoStr = recordNos.join(',')
      this.recordNos = recordNos
      this.emitRecordNos()
    },
    emitRecordNos () {
      this.$emit('updateNos', this.recordNos)
    }
  }
}
</script>
